<template>
  <div id="app">
    <transition name="fade">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      baktimeout: false
    };
  },
  methods: {
    onBackKeyDown() {
      if (this.$route.path=='/') {
        //如果路由是首页
        if (!this.baktimeout) {
          let waitTime = 2000
          this.Util.showToast({
            message: "再按一次退出App",
            position: "center",
            duration: waitTime
          });
          //定时器，指定时间后还原双击标示
          this.baktimeout = setTimeout(() => {
            this.baktimeout = false;
          }, waitTime);
        } else {
          if(!this.baktimeout){
           clearTimeout(this.baktimeout)
           this.baktimeout = false;
          }
          this.extiApp();
        }
      } else {
        //非首页情况，做路由历史回退
        this.$router.back();
      }
    },
    extiApp() {
      //退出app
      if (this.GLOBAL.plusReady) {
        navigator.app.exitApp();
      } else {
        this.Util.showToast("App out");
      }
    }
  },
  mounted() {
    var  _this = this;
    //devReady,必须写在home页面
    document.addEventListener("deviceready", onDevReady, false);
    function onDevReady() {
      _this.GLOBAL.plusReady = true;
      //监听返回键,首页双击返回退出app
      document.addEventListener("backbutton", _this.onBackKeyDown, false);
    }
    // 测试
    // document.addEventListener("backbutton", _this.onBackKeyDown, false);
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
/*路由过渡动画 透明淡入淡出*/
.fade-enter {
  opacity: 0;
}
.fade-leave {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-leave-active {
  opacity: 0;
  transition: opacity 0.5s;
}
</style>
